<template>
  <div class="item-detail flex column">
    <div class="item-title">页面基础信息</div>
    <div class="item-content">
      <Form :model="detailData" :label-width="80" :rules="ruleValidate">
        <FormItem label="页面标题" prop="label_name_cn">
          <div class="input-wrapper">
            <Input style="width: 200px;" v-model="detailData.label_name_cn" placeholder="请输入页面标题"></Input>
          </div>
        </FormItem>
        <FormItem label="分享文案">
          <div class="input-wrapper">
            <Input v-if="detailData.json" style="width: 200px;" v-model="detailData.json.text" placeholder="请输入分享文案"></Input>
          </div>
        </FormItem>
        <FormItem label="banner图片">
          <div>
          	<div class="input-file-wrapper banner-img">
              <img v-if="detailData.json && detailData.json.image_path!=''" :src="detailData.json.image_path" />
              <div class="input-tips flex center column-center" v-else>上传图片</div>
              <input name="image_path" type="file" accept="image/*" @change='handleFileChange'></input>
            </div>
            <p>建议尺寸1280*840</p>
          </div>
        </FormItem>
        <FormItem v-if="showShare" label="分享图片">
          <div>
          	<div class="input-file-wrapper">
              <img v-if="detailData.json && detailData.json.share_image!=''" :src="detailData.json.share_image" />
              <div class="input-tips flex center column-center" v-else>上传图片</div>
              <input name="share_image" type="file" accept="image/*" @change='handleFileChange'></input>
            </div>
            <p>建议尺寸520*416</p>
          </div>
        </FormItem>
      </Form>
    </div>  
  </div>
</template>
<script>

import { uploadImage } from 'api/uploadImage'

export default {
  name: 'TopTitleDetail',
  props: {
    /**
     * @description 起始值，即动画开始前显示的数值
     */
    detailData: {
      
    },
  },
  data() {
    return {
      ruleValidate: {
        label_name_cn: [
            { required: true, message: '页面标题不能为空', trigger: 'blur' }
        ]
      }
	}
  },
  methods: {
   
    // 处理图片
    handleFileChange (event) {
      var that = this;
      uploadImage(event.target.files[0]).then(imgUrl => {
          that.detailData.json[event.target.name] = imgUrl;
      }).catch(err => {
          that.$Message.error(err);  
      })  
    },
    
    // 比较版本
    compareVersion(v1, v2) {
        if (!v1 || !v2) {
            return false;
        }

        v1 = v1.split('.');
        v2 = v2.split('.');
        let len = Math.max(v1.length, v2.length);

        while (v1.length < len) {
          v1.push('0');
        }
        while (v2.length < len) {
            v2.push('0');
        }

        for (let i = 0; i < len; i++) {
            let num1 = parseInt(v1[i]);
            let num2 = parseInt(v2[i]);

            if (num1 > num2) {
              return true;
            } else if (num1 < num2) {
              return false;
            }
        }
        return true;
    }

    
  },
  
  created() {
  },

  computed: {
    showShare: function() {
      return this.compareVersion(this.detailData.version,'4.9.0926');
    }
  },
  
  components: {
  	
  }
}

</script>

<style scoped>

@import url("../baseModule.less");

.item-content {
	padding: 16px;
}

/*上传图片控件*/
.input-file-wrapper {
	border: 1px solid #f2f2f2;
	width: 120px;
	height: 96px;
	position: relative;
}
.banner-img {
  width: 120px;
	height: 80px;
}
.input-tips {
	width: 100%;
	height: 100%;
}
.input-file-wrapper img {
	width: 100%;
	height: 100%;
}
.input-file-wrapper input {
	position: absolute;
	left: 0;
	width: 100%;
	bottom: 0; top: 0;
	opacity: 0;
}
.icon-wrapper {
	min-width: 50px;
    width: 50px;
    height: 50px;
    background: #f2f2f2;
    border-radius: 50%;
    cursor: pointer;
    font-size: 24px;
    display: flex;
    align-items: center;
	justify-content: center;
}
.add-wrapper {
  color: #bdbdbd;
  position: absolute;
	left: 0;
	width: 100%;
  bottom: 0; top: 0;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
	
</style>
